<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
      <!-- 1. 引入React相关的包 -->
    <!-- 提供React对象 -->
    <script src="../js/react.development.js"></script>
    <!-- 它依赖于React, 所以必须后引入 -->
    <script src="../js/react-dom.development.js"></script>
    <style>
        .active {
          color: rgb(147, 174, 197);
        }
      </style>
</head>
<body>
    <!-- 2. 在页面上创建一个空的div容器元素 -->
    <div id="root" class='aaa'></div>
    <script>
    /* 3. 创建一个React元素  不是DOM元素*/
        const element=React.createElement('h1',{title:'你好 世界!',className:'active'},'Hello World!')
        console.log(element)
        console.log(document.getElementById('root').className) // aaa

        /* 4. 将React元素渲染到页面 
    */
   ReactDOM.render(element,document.getElementById('root'))
    </script>
</body>
</html>